<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>商品列表</h1>
<table border="1">
    <tr>
        <th>商品id</th>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品销量</th>
        <th>操作</th>
    </tr>
    <tr v-for="p in arr">
        <th>{{p.id}}</th>
        <th>{{p.title}}</th>
        <th>{{p.price}}</th>
        <th>{{p.saleCount}}</th>
        <th>
            <!--javascript: void(0) 废掉超链接的功能-->
            <a href="javascript: void(0)" @click="del(p.id)">删除</a>
            <!--点击修改需要跳转的页面,所以不能像删除一样废掉跳转-->
            <!--元素的属性里面出现变量 需要进行属性绑定-->
            <a :href="'/update.html?id='+p.id">修改</a>
        </th>
    </tr>
</table>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el:"table",
        data:{
            arr:[{id:1,title:"小米手机",price:3000,saleCount:688},
                {id:2,title:"耐克球鞋",price:2100,saleCount:64},
                {id:3,title:"李宁袜子",price:20,saleCount:688}]
        },
        created:function (){//此方法是Vue对象创建时执行的方法
            //一般会把加载完页面请求数据的代码 写在此方法中
            //发出异步请求获取数据
            axios.get("/select").then(function (response) {
                //服务器返回的数据直接给到arr数组 由于页面和数组进行了绑定
                //数组值发生改变时页面会自动发生改变

                //服务器传递过来的是二进制的数据Axios框架会先将二进制的数据转回JSON格式的字符串
                //转完字符串之后会再将JSON格式的字符串转成数组或对象
                v.arr=response.data;
            })
        },
        methods:{
            del(id){
                //发出删除的异步请求
                axios.get("/delete?id="+id).then(function (response) {
                    alert("删除成功!");
                    location.reload();//刷新页面
                })
            }
        }
    })
</script>
</body>
</html>